<template>
  <section>
    <el-table :data="couponDefineList" v-loading="loading">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-width="100px">
            <el-form-item label="数量" prop="totalNum" size="mini">
              <el-input size="mini" v-model="props.row.totalNum" style="width: 100px" :disabled="!props.row.edit"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="totalNum" size="mini">
              <el-input size="mini" v-model="props.row.price" style="width: 100px" :disabled="!props.row.edit"></el-input>
            </el-form-item>
            <el-form-item label="适用范围" prop="criteria" size="mini">
              <el-radio :disabled="!props.row.edit" v-for="type in selPropTypes" :key="type.val" :label="type.val"
                        v-model="props.row.criteria.propertiesType" @change="initSelPropType($event,props.row)">{{type.name}}</el-radio>
              <el-card v-if="(props.row.criteria.propertiesType===1 || props.row.criteria.propertiesType===3) && props.row.edit"
                       style="margin-top: 10px;width: 90%">
                <checked-goods-type v-if="props.row.criteria.propertiesType===1" :value="props.row.criteria.propertiesValue"/>
                <mall-goods v-if="props.row.criteria.propertiesType===3" :value="props.row.criteria.propertiesValue" :departmentId="props.row.departmentId"/>
              </el-card>
            </el-form-item>
            <el-form-item label="添加备注" size="mini">
              <div v-for="(ps,i) in props.row.data" :key="i" >
                <el-input size="mini" v-model="props.row.data[i]" style="width: 100px" :disabled="!props.row.edit"></el-input>
              </div>
              <i class="el-icon-plus" @click.stop="addDataInDefine(props.row)" :disabled="!props.row.edit"></i>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="名称" prop="name" width="150px">
        <template slot-scope="scope">
          <el-input v-show="scope.row.edit" size="small" v-model="scope.row.name"></el-input>
          <span  v-show="!scope.row.edit">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="开始"  :formatter="formatDate">
        <template slot-scope="scope">
          <el-date-picker size="mini" :disabled="!scope.row.edit" v-model="scope.row.start" type="datetime"
                          placeholder="选择日期时间" default-time="12:00:00" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp">
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column label="结束">
        <template slot-scope="scope">
          <el-date-picker size="mini" :disabled="!scope.row.edit" v-model="scope.row.end" type="datetime"
                          placeholder="选择日期时间" default-time="12:00:00" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column label="发送方式">
        <template slot-scope="scope">
          <el-select v-model="scope.row.way" placeholder="请选择" :disabled="!scope.row.edit" size="mini">
            <el-option label="赠送" :value="0"/>
            <el-option label="领取" :value="1"/>
            <el-option label="皆可" :value="2"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230" fixed="right">
        <template slot-scope="scope">
          <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope.row)' size="mini" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
          <el-button @click='cancelBtn(scope.row)' size="mini" v-if="scope.row.edit">取消</el-button>
          <el-button @click='del(scope)' size="mini" v-if="!scope.row.edit">删除</el-button>
          <el-button @click='sendCouponBtn(scope.row)' size="mini" v-if="!scope.row.edit" type="success">发送</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="editDialog" :title="currCouponDefine.name" v-if="currCouponDefine">
      <el-form label-width="120px" size="mini">
        <el-form-item label="ID：">{{currCouponDefine.id}} couponDefineId</el-form-item>
        <el-form-item label="名称：">
          <el-input size="mini" v-model="currCouponDefine.name"></el-input>
        </el-form-item>
        <el-form-item label="选择送达账户：">
          <el-select v-model="currCouponDefine.memberIds"  :filterable="true" remote :reserve-keyword="false" size="mini" multiple
                     default-first-option  placeholder="请输入姓名" :remote-method="remoteMethod">
            <el-option v-for="(member,index) in memberList" :key="index" :label="member.userName" :value="member.id" v-if="memberList">
              <span style="float: left">{{ member.userName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ member.phone }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="confirmSendBtn(currCouponDefine)" type="success">确认发送</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="selCriteriaDialog" :title="currCouponDefine.name" v-if="currCouponDefine && memberList">

    </el-dialog>
  </section>
</template>

<script>
  import mallGoods from '../mallGoods/mallGoods'
  import checkedGoodsType from '../mallGoods/checkedGoodsType'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import dateFormater from '@/common/date-formater'
  import errHandler from '@/assets/errHandler'
  export default {
    name: "defineList",
    props: ['couponDefineList'],
    components: {checkedGoodsType,mallGoods},
    data() {
      return {
        loading:false,
        editDialog:false,
        currCouponDefine:null,
        selCriteriaDialog:false,
        memberList:null,
        selPropTypes:[
          {name:'全店通用',val:5},
          {name:'商品类型可用',val:1},
          {name:'商品可用',val:3},
        ],
        selPropType:null,
        showCard:false
      }
    },
    created(){
      console.log(this.couponDefineList)
    },
    computed:{
    },
    watch: {
      selPropType(nv,ov){
        console.log(nv)
      },
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      initSelPropType(e,p){
        console.log('有选择动作才触发————————————',e,p)
        this.showCard=false
        p.criteria.propertiesType=e
        if(e.val===5){
          p.criteria.propertiesValue=null
        }else {
          console.log(e)
          p.criteria.propertiesValue=[]
          console.log('赋[]值')
          setTimeout(()=>{
            this.showCard=true
          },1000)
        }
      },
      getMallGoodsTypeList(){
        this.fetch({name:"getMallGoodsTypeList"})
          .then(res=>{
            console.log(res)
            this.showCard=true
            this.mallGoodsTypeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      remoteMethod(keywords) {
        //timeout,1000
        clearTimeout()
        setTimeout(()=>{
          this.fetch({name:"getMembers",data:{keywords}})
            .then(res=>{
              console.log(res)
              this.memberList=res.content
            })
            .catch(err=>{
              console.log(err)
              errHandler.handle(this,err)
            })},1000)
      },
      handleCommand(e,row) {
        console.log(e,row)
      },
      handleSelectionChange(val){
        console.log(val)
      },
      formatDate(row, column, cellValue, index){
        return dateFormater.formatDatetime(cellValue)
      },
      addDataInDefine(define){
        console.log(define)
        define.data.push('')
      },
      createCouponDefine(row){
        this.fetch({name:"createCouponDefine",data:row})
          .then(res=>{
            console.log(res)
            row.edit=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateCouponDefine(row){
        this.fetch({name:"updateCouponDefine",data:{...row}})
          .then(res=>{
            console.log(res)
            this.loading=false
            this.$emit('get')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirm(row){
        row.start = dateFormater.formatDatetime(row.start)
        row.end = dateFormater.formatDatetime(row.end)
        if(row.id === undefined){
          console.log('新建')
          row.criteria=JSON.stringify(row.criteria)
          row.criteria=row.criteria.replace('[','"')
          row.criteria=row.criteria.replace(']','"')
          this.createCouponDefine(row)
          return
        }
        if(row.edit === undefined){
          console.log('刚进来在这？？？')
          Vue.set(row,'edit',true)//后续添加属性，需要vue联动
          return
        }
        if(row.edit){
          this.loading=true
          row.criteria=JSON.stringify(row.criteria)
          row.criteria=row.criteria.replace('[','"')
          row.criteria=row.criteria.replace(']','"')
          console.log('更新的rowdata————————',row)
          this.updateCouponDefine(row)
        }else {
          row.edit=true
        }
      },
      cancelBtn(row){//取消按钮
        if(row.edit === undefined){
          Vue.set(row,'edit',false)//后续添加属性，需要vue联动
        }else {
          row.edit =false
        }
      },
      del(scope){//删除按钮
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteCouponDefine",data:{id:scope.row.id}})
              .then(res=>{
                this.loading=false
                this.couponDefineList.splice(scope.$index,1)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      sendCouponBtn(row){
        console.log(row)
        this.editDialog=true
        this.currCouponDefine=row
        //加载账户
      },
      confirmSendBtn(currCouponDefine){
        console.log(currCouponDefine)
        let data = {
          couponDefineId:currCouponDefine.id,
          name:currCouponDefine.name,
          memberIds:JSON.stringify({memberIds:currCouponDefine.memberIds})
        }
        this.sendCoupon(data)
      },
      sendCoupon(data){
        this.fetch({name:"sendCoupon",data:{...data}})
          .then(res=>{
            console.log(res)
            this.editDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      selCriteria(e,row){
        console.log(e,row)
        if(e === 'allGoods'){
          this.loading=true
          //获取部门下所有商品getGoodsList
          this.fetch({name:"getGoodsList",data:{departmentId:row.departmentId}})
            .then(res=>{
              this.loading=false
              console.log(res)
            })
            .catch(err=>{
              console.log(err)
              errHandler.handle(this,err)
            })
        }else if(e === 'goodsAble'){
          //获取商品类型
        }
      }
    }
  }
</script>

<style scoped>

</style>
